@import '../../style/themes';
@import '../../style/mixins';

.x-message-container {
  @include reset-component();

  position: fixed;
  top: 16px;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 0;
  z-index: 999;
}

.x-message {
  display: flex;
  align-items: center;
  margin-bottom: $margin-xs;
  padding: $padding-xs 20px;
  border: $border-base;
  border-width: 1px;
  box-shadow: $box-shadow-base;
  background: $message-bg;

  // transition
  &-move,
  &-enter-active,
  &-leave-active {
    transition: all 0.4s;
  }
  &-enter-from,
  &-leave-to {
    opacity: 0;
    transform: scale(0.75) translateY(10px);
  }
  &-leave-to {
    transform: scale(0.75) translateY(-10px);
  }
  &-leave-active {
    position: absolute;
  }

  &-info &_icon {
    color: $primary-color;
  }
  &-success &_icon {
    color: $success-color;
  }
  &-error &_icon {
    color: $error-color;
  }
  &-warning &_icon {
    color: $warning-color;
  }
  &-loading &_icon {
    color: $primary-color;
  }

  &_icon {
    margin-right: $margin-xs;
  }

  &_content {
    display: flex;
    align-items: center;
  }

  &_close {
    display: flex;
    align-items: center;
    margin-left: $margin-xss + 2;
  }
}
